<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form
                    :inline="true"
                    :model="queryParam"
                    :rules="rules"
                    ref="form"
                    size="mini"
                    style="margin-bottom: -18px;">
                <el-form-item label="状态" prop="type">
                    <el-select
                            v-model="queryParam.status"
                            placeholder="状态选择"
                            style="width: 100px;">
                        <el-option label="待发布" value="DRAFT"/>
                        <el-option label="已发布" value="PUBLISHED"/>
                        <el-option label="已下架" value="CLOSED"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="类别" prop="cate_id">
                    <el-input
                            v-model="queryParam.cate_id"
                            placeholder="类别名称"
                            style="width: 100px;"/>
                </el-form-item>
                <el-form-item label="品牌" prop="brand_id">
                    <el-input
                            v-model="queryParam.brand_id"
                            placeholder="品牌名称"
                            style="width: 120px;"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">
                        <d2-icon name="search"/>
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button>
                        <d2-icon name="refresh"/>
                        重置
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="goto('/goods/product/add');">
                        <d2-icon name="plus"/>
                        添加新商品
                    </el-button>
                </el-form-item>
            </el-form>
        </template>

        <!--table-->
        <el-table v-loading="listLoading" :data="tableData"
                  border fit highlight-current-row style="width: 100%;">

            <el-table-column label="编号" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <!--<el-table-column label="主图" width="180" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.major_img_url" style="height: 80px;: 10px;">
                </template>
            </el-table-column>-->

            <el-table-column label="货号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.cargo_no }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态"
                             width="180"
                             align="center"
                             :filter-method="filterHandler"
                             :filters="statusFilterOptions"
                             prop="status">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.status | statusTypeFilter">
                        {{ scope.row.status | statusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="所属店铺" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.shop_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="类别编号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.category_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="品牌编号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.brand_id }}</span>
                </template>
            </el-table-column>


            <el-table-column label="标题" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title}}/{{scope.row.sub_title}}</span>
                </template>
            </el-table-column>

            <el-table-column label="总库存" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_stock}}</span>
                </template>
            </el-table-column>

            <el-table-column label="总租赁次数" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_lease_times}}</span>
                </template>
            </el-table-column>

            <el-table-column label="上架时间" width="150" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.list_start_time}}</span>
                </template>
            </el-table-column>

            <el-table-column label="下架时间" width="150" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.list_end_time}}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序值" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.sorted}}</span>
                </template>
            </el-table-column>

            <!--<el-table-column label="标签" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-tag
                            :key="tag"
                            v-for="tag in scope.row.__tags"
                            :disable-transitions="false">
                        {{tag}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="关键字" width="120" align="center" >
                <template slot-scope="scope">
                    <el-tag
                            :key="tag"
                            v-for="tag in scope.row.__keywords"
                            :disable-transitions="false">
                        {{tag}}
                    </el-tag>
                </template>
            </el-table-column>-->


            <el-table-column label="操作" fixed="right" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-view"
                               type="primary">查看
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
    </d2-container>
</template>

<script>
  import { page } from '@/api/goods/product'
  import Pagination from '@/components/Pagination'
  import { statusKeyValue, statusMap, stautsFilterOptions } from './common'

  export default {
    name: 'product-list',
    components: {
      Pagination
    },
    filters: {
      statusTypeFilter (status) {
        return statusMap[status]
      },
      statusValueFilter (status) {
        return statusKeyValue[status]
      },
    },
    data () {
      return {
        filename: __filename,
        listLoading: false,
        tableData: [],
        statusFilterOptions: stautsFilterOptions,
        total: 0,
        queryParam: {
          current: 1,
          size: 10,
          status: undefined,
          cate_id: undefined,
          brand_id: undefined
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList () {
        this.listLoading = true
        page(this.queryParam).then(res => {
          res.records.forEach(ele => {
            ele.__tags = ele.tags.split(',')
            ele.__keywords = ele.keywords.split(',')
          })
          this.tableData = res.records
          this.total = parseInt(res.total)
          this.listLoading = false
        })
      },
      goto (path) {
        this.$router.push(path)
      },
      filterHandler (value, row, column) {
        const property = column['property']
        return row[property] === value
      }
    }
  }
</script>

<style scoped>

</style>
